<template>
  <div>
    <div class="select-con">
      <div class="tabs flex-start">
        <div
          class="tab flex-center"
          v-for="item in tabs"
          :key="item.id"
          :class="selectedId == item.id ? 'active' : ''"
          @mouseover="selectedId = item.id"
          @mouseleave="selectedId = defaultSelectedId"
          @click="changeTab(item.id)"
        >
          {{ item.name }}
        </div>
        <div class="back_box">
          <el-button @click="goBack" size="mini">返回</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//   <!-- 说明：
// 武器》没有社交：
// 热点事件》没有社交
// 历史事件》没有社交，动向
//  -->
// flag: "1"
// id: "ID1580005000000013583"
// logo: "http://192.168.2.110:8000/images/1/1b/%E8%94%A1%E8%8B%B1%E6%96%87%E5%AE%98%E6%96%B9%E5%85%83%E9%A6%96%E8%82%96%E5%83%8F%E7%85%A7.png"
// name: "蔡英文"
// <!-- 1.人物 2.组织机构 3.武器装备 4.目标设施 5.部队 6.事件 -->
export default {
  props: {
    // tabs: {
    //   // type: String,
    //   default: () => [
    //     {
    //       name: "基础资料",
    //       id: "basicData",
    //     },
    //     {
    //       name: "知识图谱",
    //       id: "knowledgeMap",
    //     },
    //     {
    //       name: "社交动态",
    //       id: "societyActivity",
    //     },
    //     {
    //       name: "动向情报",
    //       id: "tendency",
    //     },
    //     {
    //       name: "研究成果",
    //       id: "researchResult",
    //     },
    //   ],
    // },
  },
  data() {
    return {
      defaultSelectedId: "basicData",
      selectedId: "basicData",
      tabs: [
        {
          name: "基础资料",
          id: "basicData",
        },
        {
          name: "知识图谱",
          id: "knowledgeMap",
        },
        {
          name: "社交动态",
          id: "societyActivity",
        },
        {
          name: "动向情报",
          id: "tendency",
        },
        {
          name: "研究成果",
          id: "researchResult",
        },
      ],
    };
  },
  watch: {
    keyValue: {
      deep: true,
      immediate: true,
      handler(n) {
        this.inputValue = n;
      },
    },
  },
  methods: {
    goBack() {
      // this.$router.go(-1);
      sessionStorage.showTF = "1";
      sessionStorage.tabId = "";
      this.$router.push("/results");
    },
    // tab切换方法
    changeTab(id) {
      sessionStorage.removeItem("currentPage");
      // console.log(id);
      this.selectedId = id;
      this.defaultSelectedId = id;
      sessionStorage.tabId = id;
      this.$emit("changeTab", id, this.keyValue);
      // sessionStorage.currentPage
    },
    //
    flagFun(flag) {
      let a1 = [
        {
          name: "基础资料",
          id: "basicData",
        },
        {
          name: "知识图谱",
          id: "knowledgeMap",
        },
        {
          name: "社交动态",
          id: "societyActivity",
        },
        {
          name: "动向情报",
          id: "tendency",
        },
        {
          name: "研究成果",
          id: "researchResult",
        },
      ];
      // // 武器：
      // let a3 = [
      //   {
      //     name: "基础资料",
      //     id: "basicData",
      //   },
      //   {
      //     name: "知识图谱",
      //     id: "knowledgeMap",
      //   },
      //   {
      //     name: "动向情报",
      //     id: "tendency",
      //   },
      //   {
      //     name: "研究成果",
      //     id: "researchResult",
      //   },
      // ];
      // 事件：
      let a6 = [
        {
          name: "基础资料",
          id: "basicData",
        },
        {
          name: "知识图谱",
          id: "knowledgeMap",
        },
        {
          name: "研究成果",
          id: "researchResult",
        },
      ];
      switch (flag) {
        // case "3":
        //   this.tabs = a3;
        //   break;
        case "6":
          this.tabs = a6;
          break;
        default:
          this.tabs = a1;
          break;
      }
    },
  },
  created() {
    // 我要赋值
    if (this.$route.query.flagType) {
      localStorage.flag = this.$route.query.flagType + "";
    }
    // this.flagFun(localStorage.flag);
  },
  mounted() {
    let arr = [
      "basicData",
      // "knowledgeMap",
      "societyActivity",
      "tendency",
      "researchResult",
    ];
    // 是否有选中的tab：
    let s = sessionStorage.tabId;
    if (arr.includes(s)) {
      this.selectedId = s;
      this.defaultSelectedId = s;
    }
    this.flagFun(localStorage.flag);
  },
};
</script>

<style lang="scss" scoped>
// @import "~@/styles/mixin.scss";
.select-con {
  .tabs {
    position: relative;
    cursor: pointer;
    .tab {
      width: 1.35rem;
      height: 0.5rem;
      background-image: url(~@/assets/common/u750.svg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      font-size: 0.18rem;
      color: rgba(255, 255, 255, 0.8);
      &.active {
        background-image: url(~@/assets/common/orange.svg);
      }
    }
    .back_box {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>
